<template>
	<view class="distributionCarousel" :style="{ borderRadius: footerType === 'detail' ? swiperRadius : '' }">
		<swiper
			class="swiper"
			autoplay
			circular
			:touchable="false"
			:current="swiperCurrent"
			:style="{ height: swiperHeight }"
			@animationfinish="changeSwiperCurrent"
		>
			<swiper-item :key="index" v-for="(item, index) in list" @click.prevent.stop="openProductDetail(item)">
				<view
					class="swiper-item"
					:style="{
						padding: itemPadding,
						borderRadius: swiperRadius
					}"
				>
					<image
						lazy-load
						:src="item.mediaUrl"
						:style="{
							borderRadius: swiperRadius,
							opacity: isProductDetail ? 0.5 : 1
						}"
					/>

					<template v-if="isProductDetail">
						<image class="swiper-item-offShelf" :src="bannerImageIcon" />
					</template>
				</view>
			</swiper-item>
		</swiper>

		<template v-if="footerType === 'index'">
			<view class="distributionCarousel-footer-defaultIndicator">{{ swiperCurrent + 1 }}/{{ list.length }}</view>
		</template>

		<template v-else>
			<view class="distributionCarousel-footer-detailIndicator" :style="[customerFooterStyle]">
				<view
					:key="index"
					v-for="(item, index) in list"
					:class="{
						active: swiperCurrent === index && !dotFooter,
						'active-dot': swiperCurrent === index && dotFooter,
						'distributionCarousel-footer-detailIndicator-dot': dotFooter
					}"
					class="distributionCarousel-footer-detailIndicator-item"
				/>
			</view>
		</template>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { isFinite } from 'lodash';

const bannerBgimage = Object.freeze(`${defaultImageUrl}image/img_bg_banner.png`);
const offShelfBgimage = Object.freeze(`${defaultImageUrl}image/img_xqy_yxj.png`);
const fullReminder = Object.freeze(`${defaultImageUrl}image/img_home_full.png`);

export default {
	name: 'DistributionCarousel',

	props: {
		type: {
			type: String
		},

		list: {
			type: Array,
			default: () => []
		},

		height: {
			type: [String, Number],
			default: 360
		},

		itemPadding: {
			type: String,
			default: '0'
		},

		borderRadius: {
			type: [String, Number],
			default: 24
		},

		footerType: {
			type: String,
			default: 'index' // index 首页, detail 商品详情
		},

		isExpire: {
			type: Number,
			default: 0
		},

		isTandianFull: {
			type: Boolean,
			default: false
		},
		customerFooterStyle: {
			type: Object,
			default: () => {}
		},
		dotFooter: {
			type: Boolean,
			default: false
		}
	},

	watch: {
		list() {
			this.swiperCurrent = 0;
		}
	},

	computed: {
		swiperHeight() {
			const { height } = this;

			return isFinite(height) ? `${uni.upx2px(height)}px` : height;
		},

		swiperRadius() {
			const { borderRadius } = this;

			return isFinite(borderRadius) ? `${uni.upx2px(borderRadius)}px` : borderRadius;
		},

		isIndexFooter() {
			const { footerType } = this;

			return footerType === 'index';
		},

		isExpireStatus() {
			const { isExpire } = this;

			return isExpire === 1;
		},

		isProductDetail() {
			const { isExpireStatus, isTandianFull } = this;

			return isExpireStatus || isTandianFull;
		},

		bannerImageIcon() {
			const { offShelfBgimage, fullReminder, isExpireStatus, isTandianFull } = this;

			if (isExpireStatus) {
				return offShelfBgimage;
			}

			if (isTandianFull) {
				return fullReminder;
			}

			return '';
		}
	},

	data() {
		return {
			offShelfBgimage,
			fullReminder,
			bannerBgimage,

			swiperCurrent: 0
		};
	},

	methods: {
		changeSwiperCurrent(e) {
			this.swiperCurrent = e?.detail?.current || 0;
		},

		openProductDetail(params) {
			const { isIndexFooter,footerType } = this;

			if (footerType === 'detail') {
				return;
			}

			const linkUrl = (params?.linkUrl || '').replace(/\s/g, '');

			if (!linkUrl) {
				return;
			}

			let url = '';

			if (['https', 'http'].some((prefix) => linkUrl.startsWith(prefix))) {
				url = `/tandianPage/CommonWebView?webView=${linkUrl}`;
			} else {
				url = linkUrl.startsWith('/') ? linkUrl : `/${linkUrl}`;
			}

			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.distributionCarousel {
	position: relative;
	overflow: hidden;
	.swiper {
		height: 100%;

		swiper-item {
			height: 100%;
		}

		&-item {
			height: 100%;
			position: relative;
			overflow: hidden;
			border-radius: 24rpx;

			image {
				width: 100%;
				height: 100%;

				&.swiper-item-offShelf {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 160rpx;
					height: 160rpx;
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	&-footer {
		&-defaultIndicator {
			height: 32rpx;
			line-height: 32rpx;
			padding: 0 16rpx;
			border-radius: 20rpx;

			position: absolute;
			right: 24rpx;
			bottom: 48rpx;
			color: #fff;
			font-size: 24rpx;
			background: rgba(0, 0, 0, 0.5);
		}

		&-detailIndicator {
			position: absolute;
			left: 50%;
			bottom: 24rpx;
			transform: translateX(-50%);

			display: flex;

			&-item {
				width: 18rpx;
				height: 6rpx;
				background: #fff;
				border-radius: 8rpx 0px 8rpx 0px;

				margin-left: 2rpx;
				transition: width 0.3s;

				&:first-child {
					margin-left: 0;
				}

				&.active {
					width: 36rpx;
					background: #ff6b11;
				}
			}
			&-dot {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.3);
				margin-left: 8rpx;
				transition: width 0.3s;

				&:first-child {
					margin-left: 0;
				}
				&.active-dot {
					background: #ffffff;
				}
			}
		}
	}
}
</style>
